<template>
	<a-card :bordered="false">
		<!-- 查询区域 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
				<a-row :gutter="24">
					<a-col :xl="8" :lg="8" :md="11" :sm="24">
						<a-form-item label="进出场时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
							<j-date v-model="queryParam.queryStartTime" :showTime="true" date-format="YYYY-MM-DD "
								style="width: 25%" placeholder="请选择开始时间"></j-date>
							<span style="width: 10px">~</span>
							<j-date v-model="queryParam.queryEndTime" :showTime="true" date-format="YYYY-MM-DD"
								style="width: 25%" placeholder="请选择结束时间"></j-date>
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="来源类型">
							<a-select :options="sourceTypeList" placeholder="请选择来源类型"
								v-model="queryParam.sourceType"></a-select>
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="使用状态">
							<a-select :options="stateList" placeholder="请选择使用状态" v-model="queryParam.state"></a-select>
							<!-- <a-select  placeholder="请选择使用状态" :value="queryParam.stateName"
                @change="handleChange('state',$event)">
                <a-select-option v-for="(item,index) in stateList" :key="index" :value="item">
                  {{item.label}}
                </a-select-option>
              </a-select> -->
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="设备状态">
							<a-select :options="statusList" placeholder="请选择设备状态"
								v-model="queryParam.status"></a-select>
							<!-- <a-select placeholder="请选择设备状态" :value="queryParam.statusName"
                @change="handleChange('status',$event)">
                <a-select-option v-for="(item,index) in statusList" :key="index" :value="item">
                  {{item.label}}
                </a-select-option>
              </a-select> -->
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="设备编号">
							<a-input placeholder="请输入设备编号" v-model="queryParam.number"></a-input>
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="设备名称">
							<a-input placeholder="请输入设备名称" v-model="queryParam.name"></a-input>
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="保管人">
							<a-input placeholder="请输入保管人" v-model="queryParam.realname"></a-input>
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="进出场单号">
							<a-input placeholder="请输入进出场单号" v-model="queryParam.recordNumber"></a-input>
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="8" :md="11" :sm="24">
						<a-form-item label="单据类型">
							<a-select :options="typeList" placeholder="请选择单据类型" v-model="queryParam.type"></a-select>
						</a-form-item>
					</a-col>
					<a-col :xl="4" :lg="6" :md="8" :sm="24">
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
							<a-button type="primary" @click="searchReset" icon="reload"
								style="margin-left: 8px">重置</a-button>
							<a-button type="primary" icon="download" @click="handleExportXls('出入场信息')"
								style="margin-left: 8px">导出</a-button>
							<!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                </a> -->
						</span>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<!-- 查询区域-END -->

		<!-- 操作按钮区域 -->
		<div class="table-operator">
			<a-button @click="handleAdds('add','新增进场单')" icon="plus"
				style="background-color:#32cd99;color: white;">新增进场单</a-button>
			<a-button @click="handleAdds('add','新增退场单')" icon="plus"
				style="background-color:#32cd99;color: white;">新增退场单</a-button>
		</div>
		<!-- table区域-begin -->

		<div>
			<a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
				:dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
				@change="handleTableChange">
				<template slot="imgSlot" slot-scope="text,record">
					<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
					<imgs-preview v-else :imgs="text" imgH="25px"></imgs-preview>
				</template>
				<template slot="status" slot-scope="text,record">
					<span
						:style="{color:text === '1'?'#ff4d4f':text === '2'?'#FF9900':text === '3'?'#0066cc':''}">{{text === '1'?'较差':text === '2'?'一般':text === '3'?'良好':''}}</span>
				</template>
				<template slot="type" slot-scope="text,record">
					<span>{{text === '1'?'进场单':text === '2'?'退场单':''}}</span>
				</template>
				<span slot="action" slot-scope="text, record">
					<div style="display: flex;justify-content: center;">
						<!-- <a @click="handleEdit(record)" style="margin-right: 10px;">编辑 </a> -->
						<!-- <a type="primary" ><file-preview :file="record" txt="查看图片"></file-preview></a> -->
						<a @click="handleImgDetails(record)">查看图片</a>
					</div>
				</span>
			</a-table>
		</div>
		<access-modal ref="modalForm" @ok="modalFormOk"></access-modal>
		<wt-img-detail-modal ref="modalForm1" @ok="modalFormOk" />
		<!-- <wt-zujie-modal ref="modalForm1" @ok="modalFormOk"></wt-zujie-modal> -->
		<!-- <wt-zujie1-modal ref="modalForm2" @ok="modalFormOk"></wt-zujie1-modal> -->
	</a-card>
</template>
<script>
	import WtImgDetailModal from './components/WtImgDetailModal'
	import {
		httpAction,
		getAction
	} from '@/api/manage'
	import '@/assets/less/TableExpand.less'
	import {
		mixinDevice
	} from '@/utils/mixin'
	import {
		JeecgListMixin
	} from '@/mixins/JeecgListMixin'
	import accessModal from './components/accessModal'
	import {
		set
	} from 'vuedraggable'
	export default {
		name: 'Devicetype',
		mixins: [JeecgListMixin, mixinDevice],
		components: {
			// WtDeviceinformationModal,
			// WtZujieModal,
			// WtZujie1Modal
			accessModal,
			WtImgDetailModal
		},
		data() {
			return {
				description: '类别管理页面',
				// 表头
				columns: [{
						title: '填单时间',
						align: "center",
						dataIndex: 'filingTime',
					},
					{
						title: '进出场时间',
						align: "center",
						dataIndex: 'recordTime',
					},
					{
						title: '进出场单号',
						align: "center",
						dataIndex: 'recordNumber',
					},
					{
						title: '设备编号',
						align: "center",
						dataIndex: 'number'
					},
					{
						title: '设备类型',
						align: "center",
						dataIndex: 'weType'
					},
					{
						title: '设备名称',
						align: "center",
						dataIndex: 'name'
					},
					{
						title: '规格型号',
						align: "center",
						dataIndex: 'model'
					},
					{
						title: '进场存放位置/退场地点',
						align: "center",
						dataIndex: 'address'
					},
					{
						title: '保管人',
						align: "center",
						dataIndex: 'realname'
					},
					{
						title: '单据类型',
						align: "center",
						dataIndex: 'type',
						scopedSlots: {
							customRender: 'type'
						},
					},
					{
						title: '设备状态',
						align: "center",
						dataIndex: 'status',
						scopedSlots: {
							customRender: 'status'
						},
					},
					{
						title: '操作',
						dataIndex: 'action',
						align: "center",
						fixed: "right",
						width: 210,
						scopedSlots: {
							customRender: 'action'
						}
					}
				],
				levelOneOptions: [],

				url: {
					list: "/equipment/wtEquipmentDetail/list",
					delete: "/wtCategory/delete",
					deleteBatch: "/wtCategory/deleteBatch",
					exportXlsUrl: "/equipment/wtEquipmentDetail/exportXls",
					importExcelUrl: "/wtCategory/importExcel",

				},
				dictOptions: {},
				superFieldList: [],
				projectList: [],
				sourceTypeList: [{
					label: '自有',
					value: '1'
				}, {
					label: '月租',
					value: '2'
				}, {
					label: '台班',
					value: '3'
				}, {
					label: '班组',
					value: '4'
				}], //来源类型
				statusList: [{
					label: '较差',
					value: '1'
				}, {
					label: '一般',
					value: '2'
				}, {
					label: ' 良好',
					value: '3'
				}], //设备状态
				stateList: [{
					label: '闲置',
					value: '1'
				}, {
					label: '待修',
					value: '2'
				}, {
					label: ' 在用',
					value: '3'
				}], //使用状态
				typeList: [{
					label: '进场单',
					value: '1'
				}, {
					label: '退场单',
					value: '2'
				}],
			}
		},
		created() {
			this.getSuperFieldList();
		},
		computed: {
			importExcelUrl: function() {
				return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
			},
		},
		methods: {
			handleImgDetails(record) {
				this.$refs.modalForm1.title = '图片详情';
				this.$refs.modalForm1.pageType = 'detail';
				this.$refs.modalForm1.edit(record);
				this.$refs.modalForm1.disableSubmit = true;
			},
			handleAdds: function(type, record) {
				if (type === 'add') {
					this.$refs.modalForm.title = record;
					this.$refs.modalForm.disabled = false;
					this.$refs.modalForm.add(type, record);
				} else if (type === 'edit') {
					this.$refs.modalForm.title = '编辑';
					this.$refs.modalForm.disabled = false;
					this.$refs.modalForm.edit(type, record);
				}
			},
			handleLease: function(record) {
				this.$refs.modalForm1.add(record);
				this.$refs.modalForm1.title = "新增租借信息";
				this.$refs.modalForm1.disableSubmit = false;

			},
			handleLease1: function(record) {
				this.$refs.modalForm2.edit(record);
				this.$refs.modalForm2.title = "租借信息";
				this.$refs.modalForm2.disableSubmit = false;

			},
			loadData(arg) {
				if (!this.url.list) {
					this.$message.error("请设置url.list属性!")
					return
				}
				//加载数据 若传入参数1则加载第一页的内容
				if (arg === 1) {
					this.ipagination.current = 1;
				}
				var params = this.getQueryParams(); //查询条件
				this.loading = true;
				getAction(this.url.list, params).then((res) => {
					if (res.success) {
						//update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
						this.dataSource = res.result.records || res.result;
						if (res.result.total) {
							this.ipagination.total = res.result.total;
						} else {
							this.ipagination.total = 0;
						}
						//update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
					} else {
						this.$message.warning(res.message)
					}
				}).finally(() => {
					this.loading = false
				})
				getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
					if (res.success) {
						this.projectList = [];
						let treeList = res.result;
						this.projectList = [...treeList].map((v) => ({
							...v,
							value: v.id,
							label: v.departName,
						}))
					}
				})
			},
			initDictConfig() {},
			getSuperFieldList() {
				let fieldList = [];
				fieldList.push({
					type: 'string',
					value: 'parentId',
					text: '父id',
					dictCode: ''
				})
				fieldList.push({
					type: 'string',
					value: 'name',
					text: '名称',
					dictCode: ''
				})
				fieldList.push({
					type: 'int',
					value: 'type',
					text: '类型 0一级 1 二级 2 级',
					dictCode: ''
				})
				fieldList.push({
					type: 'int',
					value: 'num',
					text: '数量',
					dictCode: ''
				})
				this.superFieldList = fieldList
			},

		}
	}
</script>
<style scoped>
	@import '~@assets/less/common.less';
</style>